<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=no;">
		<title>设计师详情</title>
		<link rel="stylesheet" href="/Public/Wap/hpf/css/Hpfstyle.css" />
        <link rel="stylesheet" href="/Public/Wap/hpf/css/banner.css" />
		<script type="text/javascript" src="/Public/Wap/hpf/css/iscroll.js"></script>
		<script type="text/javascript" src="/Public/Wap/hpf/css/jQuery.js"></script>
        <script>
            $(function () {
                // 收藏
                $('#do_collect').click(function () {
                    var tid = "{$designer.id}";
                    var _this = $(this);
                    $.get("{:U('Designer/collect')}", {tid: tid,type:3}, function (r) {
                        if (r.status) {
                            if (r.action == 'add') {
                                // 收藏
                                _this.addClass('xqT3bg');
                            }
                            else if (r.action == 'remove') {
                                // 取消收藏
                                _this.removeClass('xqT3bg');
                            }
                        }
                        else {
                            alert(r.info);
                        }
                    }, 'json')
                });
            })
        </script>
        <style>
		  	.sjsxq .scroll_pic_nav{background-color:transparent;}
		  	.xqBot ul li>div>label{width: 92%;}
		  </style>
			</head>
	<body style="background-color: #ededed;">
		<div class="sjsxq">
			<div class="xqTop">
				<div class="xqTop1">
					<!--<img src="{$designer.pic_path}"/>-->
                    <!-- 这里改为设计师幻灯片 -->
                    <div style="display: block">
                    
                    <div class="wraper">
						<header id="scroll_pic_view" class="scroll_pic_view" style="overflow: hidden;">
							<div id="scroll_pic_view_div" style="<!-- width: 3840px; -webkit-transition: transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); transition: transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transform-origin: 0px 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px); transform-origin: 0px 0px 0px; transform: translate(-1920px, 0px) scale(1) translateZ(0px); -->">
								<ul id="scroll_pic_view_ul">
									<volist name="designer.pic_path" id="pic">
										<li style="width: 100%;">
				                        	<img src="{$pic}"/>
				                        </li>
				                    </volist>
								</ul>
							</div>
							<div>
								<ol id="scroll_pic_nav" class="scroll_pic_nav">
									<script>
										(function(d, $){
											var scrollPicView = d.getElementById("scroll_pic_view"),
											scrollPicViewDiv = d.getElementById("scroll_pic_view_div"),
											lis = scrollPicViewDiv.querySelectorAll("li"),
											w = scrollPicView.offsetWidth,
											len = lis.length;
											for(var i=0; i<len; i++){
												lis[i].style.width = w+"px";
												if(i == len-1){
													scrollPicViewDiv.style.width = w * len + "px";
												}
											}
						
											
											//
											var nav_lis = new Array(lis.length);
											d.write('<li class="on"><span></span></li>');
											for(var i=1; i<nav_lis.length; i++){										
												d.write("<li><span></span></li>");				
											}
										})(document, $);
									</script>
								</ol>
							</div>
						</header>
					</div>
                    </div>
					<div class="xqT1">
						<label>姓名：<span>{$designer.dname}</span></label>
						<label>职务：<span>{$designer.job}</span></label>
						<!--<label>特点：<span>{$designer.feature}</span></label>-->
						<a href="tel:{$designer.phone}"><img src="/Public/Wap/hpf/images/phone.png"/><label>电话预约</label></a>
					</div>
					<div class="xqT2">
						<p>简介：</p>
						<label class="ocsi store-info" isclick="0" subtext="<?php
                                    $str = '';
                                    if(mb_strlen($designer['content']) < 45)
                                    {
                                        $str = htmlspecialchars($designer['content']);
                                    }else{
                                        $str = strip_tags(mb_substr($designer['content'], 0,45,'utf-8'));
                                        $str .= '　&gt;&gt;更多';   
                                    }
                                    echo $str;
                                    ?>" dtext="<?php echo htmlspecialchars($designer['content']);?>">
                                    <?php
                                    $str = '';
                                    if(mb_strlen($designer['content']) < 45)
                                    {
                                        $str = htmlspecialchars($designer['content']);
                                    }else{
                                        $str = strip_tags(mb_substr($designer['content'], 0,45,'utf-8'));
                                        $str .= '　&gt;&gt;更多';   
                                    }
                                    echo $str;
                                    ?>
    
                        </label>
					</div>
				</div>
				<div class="xqT3">
					<ul>
						<li class="xqT30" style="width: 30%; color:#ff8800;">{$designer.collect_total}热度</li>
						<li{$designer['status']?' class="xqT3bg"':''}><label class="xqT35"></label><span>{$designer['status']?'在岗':'休息'}</span></li>
						<li><a href="http://api.map.baidu.com/marker?location={$designer.store_location}&title={$designer.store_name|urlencode}&content={$designer.store_address|urlencode}&output=html&src=faxiu"><label class="xqT32"></label><span>导航</span></a></li>
						<li><label class="xqT33"></label><span>分享</span></li>
						<li{$designer['is_collect']?' class="xqT3bg"':''} id="do_collect"><label class="xqT34"></label><span>{$designer['is_collect']?'已收藏':'收藏'}</span></li>
					</ul>
				</div>
			</div>
			<div class="xqBot">
				<p><label></label><span>最新作品</span><label></label></p>
				<ul>
                    <volist name="designer.new_works" id="work">
					<li>
						<div>
							<!-- 收藏量 -->
							<a href="{:U('Works/detail',array('id'=>$work['id']))}"><img src="{$work.pic_path}"/><span>
                            <img src="/Public/Wap/hpf/images/xingx.png"/><label>{$work.collect_nums|default=0}</label></span></a>
							<label>{$work.wname}</label>
						</div>
					</li>
                    </volist>
				</ul>
			</div>
		</div>



	
<div class="fenxiangjt" style="display: none; width:100%; position: fixed;top:0;left:0;">
	<div style="width:100%; background: url(/Public/Wap/hpf/images/75.png) repeat;position: relative;">
	 <img src="/Public/Wap/hpf/images/fenxiang.png" alt="">
	</div>
</div>


<script>
	$(function(){
		$(document).on("click",".xqT33",function(){
			var w = $(window).width();
			var h = $(window).height();
			$(".fenxiangjt").css("height",h);
			$(".fenxiangjt div").css("height",h);

			$(".fenxiangjt img").css("width","60%").css("position","absolute").css("top",0).css("right","8%");
			
			$(".fenxiangjt").show();
		});

		$(document).on("click",".fenxiangjt",function(){
			$(this).hide();
		});


             $(document).on("click",".ocsi",function(){
                    var isclick = $(this).attr("isclick");
                    if(1==isclick)
                    {
                        $(this).addClass("store-info");
                        $(this).attr("isclick","0");
                        $(this).html($(this).attr("subtext"));
                    }else{
                        $(this).removeClass("store-info");
                        $(this).attr("isclick","1");
                        $(this).html($(this).attr("dtext"));
                    }
                });


	});

$(function(){
                var scroll_pic_view = new iScroll('scroll_pic_view', { 
                snap: true,
                momentum: false,
                hScrollbar: false,
                vScroll:false,
                useTransition: true,
                onScrollEnd: function() {
                        $("#scroll_pic_nav li").removeClass("on").eq(this.currPageX).addClass("on");
                    //$("#scroll_pic_nav li.on").prev().addClass("left");
                    //$("#scroll_pic_nav li.on").next().removeClass("left");    
                    
                        var  list=$("#scroll_pic_nav li");
                        for(var k=0;k<list.length;k++){
                        if(k<this.currPageX)
                            $(list[k]).addClass("left");
                        else
                            $(list[k]).removeClass("left");
                        }                                               
                    }
                });
});


</script>




	</body>
</html>
